<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="#{localeMB.language}" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<f:view locale="#{localeMB.locale}" contentType="text/html"
	encoding="UTF-8">

	<!--HEAD-->
	<h:head>
		<link rel="shortcut icon" type="image/x-icon"
			href="#{request.contextPath}/resources/images/jobs.jpg" />
		<title><ui:insert name="title">Auction House</ui:insert></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- Bootstrap -->
		<h:outputStylesheet library="webjars/bootstrap/2.3.2/css" name="bootstrap.min.css" />
		<h:outputStylesheet library="webjars/bootstrap/2.3.2/css" name="bootstrap-responsive.css" rel="stylesheet" />
		
		<!-- Customized CSS -->
		<h:outputStylesheet library="css" name="style.css" />
		
		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
        //<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
	</h:head>

	<!--BODY-->
	<h:body>

		<!-- TOP NAVIGATION BAR -->
		<div id="nav_bar" class="navbar navbar-inverse navbar-fixed-top">
			<div id="inner_nav_bar" class="navbar-inner">
				<div id="container_nav_bar" class="container">

					<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
					<a class="btn btn-navbar" data-toggle="collapse"
						data-target=".nav-collapse"> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
					</a>
					<!--/ .btn-navbar -->

					<h:form id="form_container_nav_bar">
						<!-- Brand -->
						<h:link class="brand" outcome="/default">Auction House
                            <f:param name="cid"
								value="#{javax.enterprise.context.conversation.id}" />
						</h:link>

						<!-- Buttons on the left -->
						<div class="nav-collapse collapse nav pull-left">
							<ul class="nav">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown">Languages <b class="caret"></b></a>
									<ul class="dropdown-menu">
										<li><h:commandLink action="#{localeMB.setLanguage('fr')}"
												styleClass="menu-fr" immediate="true">
												<f:ajax render="@form" />
												<h:graphicImage library="images" name="fr.png" height="24px"
													width="38px" />
												<h:outputText value="&nbsp;Fran&#xe7;ais" />
											</h:commandLink></li>
										<li><h:commandLink action="#{localeMB.setLanguage('en')}"
												styleClass="menu-en" immediate="true">
												<f:ajax render="@form" />
												<h:graphicImage library="images" name="en.png" height="24px"
													width="38px" />
												<h:outputText value="&nbsp;English" />
											</h:commandLink></li>
										<li><h:commandLink action="#{localeMB.setLanguage('ro')}"
												styleClass="menu-en" immediate="true">
												<f:ajax render="@form" />
												<h:graphicImage library="images" name="ro.png" height="24px"
													width="38px" />
												<h:outputText value="&nbsp;Rom&#xe2;n&#xe3;" />
											</h:commandLink></li>
									</ul></li>
							</ul>
						</div>

						<!--/ Buttons on the left -->

						<!-- Buttons on the right -->
						<div id="logged_in_info"
							class="nav-collapse collapse nav pull-right">

							<ul class="nav">
								<!-- sign in -->
								<li><h:commandLink rendered="#{!userMB.userLoggedIn}"
										action="signin" value="#{i18n.logIn}" /></li>
								<li><h:commandLink action="signup"
										rendered="#{!userMB.userLoggedIn}" value="#{i18n.signUp}" />
								</li>
								<li><h:outputLink rendered="#{userMB.userLoggedIn}"
										value="#{request.contextPath}/j_spring_security_logout"
										onclick="document.getElementById('form_container_nav_bar:logOut').click();">
										<h:outputText value="#{i18n.logOut}" />
									</h:outputLink></li>
							</ul>
							<div class="clock_tab">
								<p:clock pattern="dd/MM/yyyy" />
							</div>
						</div>
						<!--/ Buttons on the right -->
						<p:commandButton id="logOut" style="display: none;"
							action="#{userMB.logout}" />
					</h:form>
				</div>
			</div>
		</div>
		<!--/.TOP NAVIGATION BAR -->


		<!-- CONTENT -->
		<div class="container-fluid">

			<!-- Error messages-->
			<div class="page-header">
				<h:messages globalOnly="true" errorClass="alert alert-error"
					warnClass="alert" infoClass="alert alert-info" />
				&nbsp;
			</div>

			<div class="row-fluid">

				<!-- MENU -->
				<div class="span3 well">
					<ui:insert name="menu">
						<h:form rendered="#{request.isUserInRole('ROLE_CLIENT')}">
							<ul>
								<li><h:commandLink action="home?faces-redirect=true"
										value="#{i18n.home}"
										rendered="#{request.isUserInRole('ROLE_CLIENT')}" /></li>
								<li><h:commandLink
										action="currentProjects?faces-redirect=true"
										value="#{i18n.currentProjects}"
										rendered="#{request.isUserInRole('ROLE_CLIENT')}" /></li>
								<li><h:commandLink action="addProject?faces-redirect=true"
										value="#{i18n.addProject}"
										rendered="#{request.isUserInRole('ROLE_CLIENT')}" /></li>
								<li><h:commandLink
										action="pastProjects?faces-redirect=true"
										value="#{i18n.pastProjects}"
										rendered="#{request.isUserInRole('ROLE_CLIENT')}" /></li>
							</ul>

						</h:form>
						<h:form rendered="#{request.isUserInRole('ROLE_DA')}">
							<ul>
								<li><h:commandLink
										action="clearedProjects?faces-redirect=true"
										value="#{i18n.clearedProjects}"
										rendered="#{request.isUserInRole('ROLE_DA')}" /></li>
								<li><h:commandLink action="wonProjects?faces-redirect=true"
										value="#{i18n.wonProjects}"
										rendered="#{request.isUserInRole('ROLE_DA')}" /></li>
								<li><h:commandLink
										action="myCollaborators?faces-redirect=true"
										value="#{i18n.myCollaborators}"
										rendered="#{request.isUserInRole('ROLE_DA')}" />
									<ul>
										<li><h:commandLink
												action="newCollaborator?faces-redirect=true80-"
												value="#{i18n.newCollaborator}"
												rendered="#{request.isUserInRole('ROLE_DA')}" /></li>
									</ul></li>
							</ul>

						</h:form>
					</ui:insert>
				</div>

				<!-- CONTENT -->
				<div class="span9 well body-page">
					<ui:insert name="body" />
				</div>
				<!--/.CONTENT -->
			</div>
		</div>

		<!-- FOOTER -->
		<div class="container-fluid">
			<div class="row-fluid well">
				<!-- <div class="span3 text-center">
					<a href="#">Source code on GitHub</a>
				</div> -->
				<div class="span6 text-center">
					<a class="muted credit" href="#">Ioana-Iulia Gosav</a>
				</div>
			</div>
		</div>
		<!--/.FOOTER -->

		<!-- Le javascript
       ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<!-- <h:outputScript name="webjars/jquery/1.9.1/jquery.min.js" />
		<h:outputScript library="webjars/bootstrap/2.3.2/js"
			name="bootstrap.min.js" /> -->
	</h:body>
</f:view>
</html>